<template>
  <div id="app">
    <div ref="bgimg" class="bgimg" :style="bgBlurValNew
        ? `filter: blur(${bgBlurValNew}px) brightness(${100 + bgBlurValNew
        }%);`
        : ''
      "></div>
    <div class="bgimgMark" :style="bgMarkValNew
        ? `background-Color: rgba(0,0,0);opacity:${[bgMarkValNew]} ;`
        : ''
      "></div>
    <div class="skin-peeler" @click="toSetThemeColor"></div>
    <div class="huanfu-wrapper" @click="toSetThemeColor">
      <svgIcon slot="prefix" :name="'icon-huanfu'" :size="30"></svgIcon>
    </div>
    <router-view />
    <!-- 主题设置 -->
    <drawerOptions @change="toChangeBgImg" :isShowing="isShowSelTheme" @close="toSetThemeColor" />
  </div>
</template>
<script>
import drawerOptions from "./views/components/drawerOptions";
import mySlider from "./components/mySlider.vue";
import menuTree from "./components/menuTree.vue";
export default {
  name: "app",
  components: {
    drawerOptions,
    mySlider,
    menuTree,
  },
  data() {
    return {
      isShowSelTheme: false, //是否展示换肤弹窗
      bgImgBlurVal: 0, //背景模糊度
      bgImgMarkVal: 0, //背景遮罩程度
    };
  },
  provide() {
    return {
      getBgImgOptions: this.getBgImgOptions,
    };
  },
  computed: {
    bgMarkValNew() {
      console.log("dsjkfhsjdfh", this.bgImgMarkVal / 100);
      return this.bgImgMarkVal / 100;
    },
    bgBlurValNew() {
      return this.bgImgBlurVal / 5;
    },
  },
  mounted() {
    // this.toSetThemeColor();
    // this.toChangeBgImg()
  },
  methods: {
    toSetThemeColor(path) {
      this.isShowSelTheme = !this.isShowSelTheme;
    },
    // 获取背景图片的相关配置
    getBgImgOptions(val) {
      switch (val.type) {
        case "blur":
          this.bgImgBlurVal = val.value;
          break;
        case "mark":
          this.bgImgMarkVal = val.value;
          break;

        default:
          break;
      }
    },
    toChangeBgImg(imgName) {
      let img = ''
      if (!imgName) {
        imgName = 'bg-1.jpg'
      }
      img = require(`./assets/bg/${imgName}`);
      this.$refs.bgimg.style = `background-image: url(${img});`;
    },
  },
};
</script>
<style lang="scss">
// @import './common/css/color.scss';
#app {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;

  .bgimg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -10;
    background-image: url("./assets/bg/bg-3.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: background-image 2s;
  }

  .bgimgMark {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -9;
  }

  .skin-peeler {
    width: 0;
    height: 0;
    border: 60px solid transparent;
    border-bottom: 60px solid rgba($color: #000, $alpha: 0.5);
    position: absolute;
    top: -60px;
    right: -60px;
    z-index: 2999;
    transform: rotate(45deg);
  }

  .huanfu-wrapper {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 9999;
  }
}
</style>
